import React, { Component } from 'react';
import { ImageBackground, FlatList, View, Image, RefreshControl, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader, MyRightImageHeader } from '../components/MyHeader';
import { api_member_info_bankList, api_member_info_delBank, api_member_info_SubAccountList, api_member_redpack_my_redpack } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import Colors from '../constants/Colors';
import { show } from '../constants/Toast';
import MyListView from '../components/MyListView';

export default class RedEnvelopesScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getData(1);
        })
    }

    render() {

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyHeader title='广告红包' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }}
                    righttext='发红包' rightClick={() => {
                        this.props.navigation.navigate('SendRedEnvelopes')
                    }} />
                <MyListView
                    ref='MyListView'
                    list={this.state.list}
                    EmptyView={
                        <View style={{ height: 450 * unitWidth, alignItems: 'center' }}>
                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginVertical: 10 * unitWidth, marginHorizontal: 15 * unitWidth }}>
                                <Text style={{ fontSize: 14 * unitWidth, color: Colors.colorOrange }}>
                                    <Image style={{ width: 18 * unitWidth, height: 18 * unitWidth }} source={require('../res/me_tip.png')} resizeMode='stretch' />
                                    {'        发广告红包有助于提升关注度，增加销售量。'}
                                </Text>
                            </View>
                            <Image style={{
                                width: 328 * unitWidth,
                                height: 257 * unitWidth, marginTop: 50 * unitWidth
                            }} source={require('../res/me_adhb.png')} resizeMode='stretch' />
                            <Text style={{ fontSize: 17 }}>还没有红包信息，<Text style={{ color: Colors.colorOrange }} onPress={() => {
                                this.props.navigation.navigate('SendRedEnvelopes')
                            }}>去发红包</Text></Text>
                        </View>
                    }
                    renderItem={this.getItem.bind(this)}
                    getList={this.getData.bind(this)}
                />
            </View>
        );
    }

    getItem({ item, index }) {
        return (
            <View style={{ height: 140 * unitWidth, backgroundColor: Colors.white, marginTop: 5 * unitWidth }}>
                <View style={{ marginLeft: 25 * unitWidth, flexDirection: 'row', marginVertical: 12 * unitWidth }}>
                    <Image style={{
                        width: 110 * unitWidth,
                        height: 72 * unitWidth
                    }} source={{ uri: item.adv_url }} resizeMode='stretch' />
                    <View style={{ marginLeft: 10 * unitWidth, justifyContent: 'center', width: 200 * unitWidth }}>
                        <Text style={{ fontSize: 15, color: Colors.black }}>{item.title}</Text>
                        <View style={{ flexDirection: 'row', marginTop: 7 * unitWidth }}>
                            <View style={{ flex: 1, alignItems: 'center' }}>
                                <Text style={{ fontSize: 15, color: Colors.color33 }}>{item.money}</Text>
                                <Text style={{ fontSize: 13, color: Colors.color99, marginTop: 5 * unitWidth }}>红包总金额</Text>
                            </View>
                            <View style={{ flex: 1, alignItems: 'center' }}>
                                <Text style={{ fontSize: 15, color: Colors.color33 }}>{item.total}</Text>
                                <Text style={{ fontSize: 13, color: Colors.color99, marginTop: 5 * unitWidth }}>红包数量</Text>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={{ backgroundColor: Colors.colorEF, width: 340 * unitWidth, alignSelf: 'center', height: 0.5, marginVertical: 3 * unitWidth }} />
                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 25 * unitWidth, marginTop: 9 * unitWidth }}>
                    <Text style={{ color: Colors.color99, fontSize: 13 }}>{item.paytime}</Text>
                    <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 15 * unitWidth }}>领取人数：</Text>
                    <Text style={{ color: Colors.colorOrange, fontSize: 13 }}>{item.get_total}</Text>
                    <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 15 * unitWidth }}>已退回红包：</Text>
                    <Text style={{ color: Colors.colorOrange, fontSize: 13 }}>{item.backnum}</Text>
                </View>
                <Image style={{
                    width: 41 * unitWidth,
                    height: 41 * unitWidth, position: 'absolute', top: 0, right: 0
                }} source={item.status == '1' ? require('../res/me_hbjxz.png') : require('../res/me_hbyjs.png')} resizeMode='stretch' />
            </View>
        )
    }

    //获取
    getData(page) {
        let params = {
            page: page
        }
        postFetch(api_member_redpack_my_redpack, params, {
            success: (response) => {
                if (page == 1) {
                    this.refs.MyListView.onHasMore();
                    this.setState({
                        list: response.result.list,
                    })
                } else {
                    if (response.result.list && response.result.list.length > 0) {
                        this.refs.MyListView.onHasMore();
                        this.setState({
                            list: this.state.list.concat(response.result.list),
                        })
                    } else {
                        this.refs.MyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                this.refs.MyListView.onNoMore();
                show(response.result.message);
            }
        })
    }

    // delete() {
    //     let params = {
    //         "id": this.deleteId,
    //     }
    //     postFetch(api_member_info_delBank, params, {
    //         success: (response) => {
    //             show('删除成功');
    //             this.getData(1);
    //             this.refs.CommonModal.hideModal();
    //         },
    //         fail: (response) => {
    //             show(response.result);
    //             this.refs.CommonModal.hideModal();
    //         }
    //     })
    // }
}